<template>
  <div class="sort-list-group">
    <a-icon type="menu" :class="['mover', defaultChecked && 'unmover']" />
    <span class="column-title">
      {{ title }}
    </span>
    <span
      :class="[
        'sort-icon',
        { 'default-checked': defaultChecked, 'sort-checked': isChecked  },
      ]"
      @click.stop="onCheck(title, defaultChecked)"
    >
      <a-icon type="stop" v-if="defaultChecked"/>
      <a-icon type="check-circle" v-else-if="isChecked"/>
      <span class="iconfont icon-weixuanzhong" v-else></span>
    </span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "SortItem",
  data() {
    return {
      active: true
    };
  },
  props: {
    defaultChecked: {
      type: Boolean,
      default: false
    },
    isChecked: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default() {
        return "";
      }
    }
  },
  computed: {},
  mounted() {},
  components: {},
  methods: {
    onCheck(title, defaultChecked) {
      if (defaultChecked) {
        return;
      }
      this.$emit("onChecked", title);
    }
  }
};
</script>

<style lang="less" scoped>
.sort-list-group {
  margin-bottom: 20px;
  position: relative;
  display: block;
  padding: 12px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  cursor: pointer;

  .sort-icon {
    cursor: pointer;
    color: gray;
    font-size: 18px;
  }

  .sort-checked {
    color: #3D6CF7;
  }

  .default-checked {
    color: #BFBFBF;
  }

  .mover {
    margin-right: 20px;
    cursor: move;
  }
  .unmover {
    cursor: not-allowed;
  }
  .close {
    float: right;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .sort-btn {
    .checked {
      color: #3d6cf7;
    }

    span {
      padding: 5px 10px;
      border: 1px solid #eee;
      display: inline-block;
      border-radius: 3px;
      cursor: pointer;
    }
  }

  .del-icon {
    cursor: pointer;
    margin-left: 10px;
  }

  .add-icon {
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
  }

  .column-title {
    display: inline-block;
    width: 70%;
  }
}
</style>
